/**
 *
 * by littlefean
 */

// 文字输入框
let inputEle = document.querySelector(".newInput");
// 新建按钮
let newBtn = document.querySelector(".newBtn");
let dateEle = document.querySelector(".dateSet");
let timeEle = document.querySelector(".timeSet");
let tempEle = document.querySelector(".eventTemp");
let overTempEle = document.querySelector(".overEventTemp");

function strip(string) {
    let res = ""
    for (let char of string) {
        if (char !== " ") {
            res += char;
        }
    }
    return res;
}

function dn(num) {
    if (num < 10) {
        return `0${num}`;
    } else {
        return num.toString();
    }
}

/**
 * 判断一个时间是否是在未来的。
 * @param dateString 日期字符串  2022-01-01
 * @param timeString 时间字符串  13:59:59
 * @returns {boolean} true表示这个时间还没有过去
 */
function isInFuture(dateString, timeString) {
    let d = new Date();
    let y = eval(dateString.substring(0, 4));
    let mo = eval(dateString.substring(5, 7));
    let day = eval(dateString.substring(8, 10));
    // 13:59:59
    let h = eval(timeString.substring(0, 2));
    let m = eval(timeString.substring(3, 5));
    let s = eval(timeString.substring(6, 8));

    if (y < d.getFullYear()) {
        return false;
    } else if (y > d.getFullYear()) {
        return true;
    } else {
        if (mo < d.getMonth() + 1) {
            return false;
        } else if (mo > d.getMonth() + 1) {
            return true;
        } else {
            if (day < d.getDate()) {
                return false;
            } else if (day > d.getDate()) {
                return true;
            }
        }
    }
    // 日期没问题，开始判断时间
    if (h < d.getHours()) {
        return false;
    } else if (h > d.getHours()) {
        return true;
    } else {
        if (m < d.getMinutes()) {
            return false;
        } else if (m > d.getMinutes()) {
            return true;
        } else {
            return s >= d.getSeconds();
        }
    }
}

/**
 * 告诉后端删除一个todoList里面的一个事件
 * @param eveJsonObj 符合格式的js对象
 */
async function delTodoEventServer(eveJsonObj) {
    oAjax.open("POST", `http://localhost:${CODE}/delTodoEvent`);
    oAjax.setRequestHeader("Content-Type", "application/json");
    oAjax.send(JSON.stringify(eveJsonObj));
    oAjax.onload = function () {
        console.log("后端数据库删除成功");
    }
}

/**
 * 告诉后端删除一个readyList里面的一个事件
 * @param eveJsonObj 符合格式的js对象
 */
async function delReadyEventServer(eveJsonObj) {
    oAjax.open("POST", `http://localhost:${CODE}/delReadyEvent`);
    oAjax.setRequestHeader("Content-Type", "application/json");
    oAjax.send(JSON.stringify(eveJsonObj));
    oAjax.onload = function () {
        console.log("后端数据库删除成功");
    }
}

/**
 * 告诉后端，在 todoList 里面添加一个事件
 * @param eveJsonObj
 */
function addTodoEventServer(eveJsonObj) {
    oAjax.open("POST", `http://localhost:${CODE}/addTodoEvent`);
    oAjax.setRequestHeader("Content-Type", "application/json");
    oAjax.send(JSON.stringify(eveJsonObj));
    oAjax.onload = function () {
        console.log("后端该事件已经完成");
    }
}

/**
 * 告诉后端完成了一个 todoList 里面的一个事件
 * @param eveJsonObj 符合格式的js对象
 */
async function addReadyEventServer(eveJsonObj) {
    oAjax.open("POST", `http://localhost:${CODE}/addReadyEvent`);
    oAjax.setRequestHeader("Content-Type", "application/json");
    oAjax.send(JSON.stringify(eveJsonObj));
    oAjax.onload = function () {
        console.log("后端该事件已经完成");
    }
}

/**
 * 添加一个事件
 * @param dateString 日期格式字符串
 * @param timeString 时间格式字符串
 * @param text 这个事件的描述
 */
function addTodoEventClient(dateString, timeString, text) {
    // 前端添加到界面
    let eventEle = document.createElement("div");
    eventEle.classList.add("eventItem");
    eventEle.innerHTML = `
        <div class="eventContent">${text}</div>
            <div class="deadLine">
                <span class="dateSpan">${dateString}</span>
                <span class="timeSpan">${timeString}</span>
            </div>
        <div class="delBtn">X</div>`;

    // 添加删除事件
    eventEle.querySelector(".delBtn").onclick = function () {
        // 告诉后端删除数据
        delTodoEventServer({name: text, date: dateString, time: timeString}).then(() => {
            // 前端删除这个元素
            tempEle.removeChild(eventEle);
        });
    };
    tempEle.appendChild(eventEle);
}

/**
 * 添加一个事件
 * @param dateString 日期格式字符串
 * @param timeString 时间格式字符串
 * @param text 这个事件的描述
 */
function addReadyEventClient(dateString, timeString, text) {
    // 前端添加到界面
    let eventEle = document.createElement("div");
    eventEle.classList.add("eventItem");
    eventEle.innerHTML = `
        <div class="eventContent">${text}</div>
            <div class="deadLine">
                <span class="dateSpan">${dateString}</span>
                <span class="timeSpan">${timeString}</span>
            </div>
        <div class="delBtn">X</div>`;

    // 添加删除事件
    eventEle.querySelector(".delBtn").onclick = function () {
        // 告诉后端删除数据
        delReadyEventServer({name: text, date: dateString, time: timeString}).then(() => {
            // 前端删除这个元素
            overTempEle.removeChild(eventEle);
        });

    };
    overTempEle.appendChild(eventEle);
}

window.onload = function () {
    // 一开始就向后端请求
    oAjax.open("get", `http://localhost:${CODE}/getInit`, true);
    oAjax.setRequestHeader("Content-Type", "application/json"); // "text/plain"
    oAjax.send();
    oAjax.onload = function () {
        // 待办事项 [{name:xxx, date:xxx, time:xxx}, {}, ...]
        // 已完成事项 [{name:xxx, date:xxx, time:xxx}, {}, ...]
        // {todoList:[], alreadyList:[]}
        let res = JSON.parse(oAjax.responseText);
        for (let eve of res["todoList"]) {
            addTodoEventClient(eve["date"], eve["time"], eve["name"]);
        }
        for (let eve of res["alreadyList"]) {
            addReadyEventClient(eve["date"], eve["time"], eve["name"]);
        }
    }
    // 给设置截止日期的部分设置成当前时间
    let d = new Date();
    dateEle.value = `${d.getFullYear()}-${dn(d.getMonth() + 1)}-${dn(d.getDate())}`;
    timeEle.value = `${dn(d.getHours())}:${dn(d.getMinutes())}:${dn(d.getSeconds())}`;

    // 新按钮点击事件
    newBtn.addEventListener("click", () => {
        let dateStr = dateEle.value;  // 2022-01-01
        let timeStr = timeEle.value;  // 时间
        // 判断时间是否已经过去
        if (!isInFuture(dateStr, timeStr)) {
            alert("截止时间已过！无法创建事件");
            return;
        }
        // 获取文字输入框里的文字
        let text = inputEle.value;
        if (strip(text) === "") {
            return;
        }
        // 先处理后端
        addTodoEventServer({name: text, date: dateStr, time: timeStr});
        addTodoEventClient(dateStr, timeStr, text);
        inputEle.value = "";
    });
    /**
     * 每秒更新一次
     */
    setInterval(() => {
        // 只做前端上的更改
        for (let ele of tempEle.childNodes) {
            let eleName = ele.querySelector(".eventContent").innerText;
            let eleDate = ele.querySelector(".dateSpan").innerText;
            let eleTime = ele.querySelector(".timeSpan").innerText;
            if (!isInFuture(eleDate, eleTime)) {
                // 如果这个标签已经过去了
                tempEle.removeChild(ele);
                addReadyEventClient(eleDate, eleTime, eleName);
            }
        }
    }, 1000);

    // setInterval(() => {
    //     // 每两秒发送一次
    //     /**
    //      * "[]" 表示没有
    //      * "[{name: "xxx", date: "xxx", time: "xxx"}, {}, {}, ....]" 表示已经过期了的任务
    //      * 遍历这个数组，里面的内容可能有些是在右边的，有些是在左边的，
    //      * 需要把左边的东西移动到右边去
    //      */
    //     tempEle.innerHTML = "";
    //     overTempEle.innerHTML = "";
    //     oAjax.open("get", `http://localhost:${CODE}/getInit`, true);
    //     oAjax.setRequestHeader("Content-Type", "application/json"); // "text/plain"
    //     oAjax.send();
    //     oAjax.onload = function () {
    //         let res = JSON.parse(oAjax.responseText);
    //         for (let eve of res["todoList"]) {
    //             addTodoEventClient(eve["date"], eve["time"], eve["name"]);
    //         }
    //         for (let eve of res["alreadyList"]) {
    //             addReadyEventClient(eve["date"], eve["time"], eve["name"]);
    //         }
    //     }
    //     // oAjax.open("get", `http://localhost:${CODE}/checkReadyEvent`, true);
    //     // oAjax.setRequestHeader("Content-Type", "application/json"); // "text/plain"
    //     // oAjax.send();
    //     // oAjax.onload = function () {
    //     //     let readyList = JSON.parse(oAjax.responseText);
    //     //     console.log("过期列表：", readyList);
    //     //
    //     //     for (let item of readyList) {
    //     //         // 遍历数组里的每一个元素
    //     //         let targetName = item["name"];
    //     //         let targetDate = item["date"];
    //     //         let targetTime = item["time"];
    //     //         for (let ele of tempEle.childNodes) {
    //     //             // 遍历自身盒子列表
    //     //             let eleName = ele.querySelector(".eventContent").innerText;
    //     //             let eleDate = ele.querySelector(".dateSpan").innerText;
    //     //             let eleTime = ele.querySelector(".timeSpan").innerText;
    //     //             if (targetDate === eleDate && targetName === eleName && targetTime === eleTime) {
    //     //                 // 把这个盒子移动到右边去
    //     //                 // 后端删除
    //     //                 delTodoEventServer(item).then(() => {
    //     //                     // 后端删除完成后
    //     //                     addReadyEventServer(item).then(() => {
    //     //                         // 后端添加完成后
    //     //                         // 前端删除
    //     //                         tempEle.removeChild(ele);
    //     //                         addReadyEventClient(eleDate, eleTime, eleName);
    //     //                     });
    //     //                 });
    //     //             }
    //     //         }
    //     //     }
    //     // }
    // }, 5000);

}
